<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<meta charset="UTF-8">
 
<!-- If IE use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<!-- Set the page to the width of the device and set the zoon level -->
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Bootstrap Tutorial</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.jumbotron{
    background-color:#2E2D88;
    color:white;
}
/* Adds borders for tabs */
.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}
.nav-tabs {
    margin-bottom: 0;
}

.mycontent-right {
  border-right: 0.5px solid #F2F7F9;
  /*border-left: 0.5px solid #F2F7F9;*/
  /*border-top: 0.5px solid #F2F7F9;*/
  /*border-bottom: :1px solid #F2F7F9;*/
}
.mycontent-left {
  border-left: 0.5px solid #F2F7F9;
  /*border-left: 0.5px solid #F2F7F9;*/
  /*border-top: 0.5px solid #F2F7F9;*/
  /*border-bottom: :1px solid #F2F7F9;*/
}

.mycontent-bottom {
  /*border-left: 0.5px solid #F2F7F9;*/
  /*border-left: 0.5px solid #F2F7F9;*/
  /*border-top: 0.5px solid #F2F7F9;*/
  border-bottom:1px solid #F2F7F9;
}



.vertical-align {
    display: flex;
    align-items: center;
}

.classWithPad { margin-right:5px; padding-right:5px; }
.classWithBottmPad { margin-bottom:10px; padding-bottom:10px; }
.taskWithBottmPad { margin-bottom:2px; padding-bottom:2px; }
.taskWithPad { margin-left:5px; padding-left:5px; }
</style>
 
</head>
<body>
<br/>
	<div class="container ">
		<div class="col-md-3 col-lg-2 mycontent-right" >
			
			<div class="classWithPad">
				<div class="row">	
					<img src="http://placehold.it/100x100" id="profileimage" class="img-responsive  img-circle  img-thumbnail center-block" alt="Responsive image"> 
					<h4 class="text-center"> Abhsihek Choudhury	</h4>
					<p class="text-center"> Solution Architect	</p>
					
					<hr/>
				</div>
				<div class="row">	
					<ul class="nav nav-pills nav-stacked">
			  			<li class="active"><a href="#">All Tasks</a></li>
			  			
			 		  <!-- Add drop down menu -->
					 	<li class="dropdown">
					    	<a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects
					    		<span class="caret"></span></a>
					    	<ul class="dropdown-menu">
					      		<li><a href="#">KDDI</a></li>
					      		<li><a href="#">Task Manager</a></li>
					      		<li><a href="#">POC</a></li>
					    	</ul>
					    </li>
					    <li class="dropdown">
					    	<a class="dropdown-toggle" data-toggle="dropdown" href="#">My Dues
					    		<span class="caret"></span></a>
					    	<ul class="dropdown-menu">
					      		<li><a href="#"><span class="glyphicon glyphicon-star"></span>Due today</a></li>
					      		<li><a href="#">Due This Week</a></li>
					      		<li><a href="#">Due Later</a></li>
					    	</ul>
					    </li>
					  <li><a href="#">Urgents</a></li>
					  <li><a href="#">Statistics</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-md-9 col-lg-10 mycontent-left" >
			<div class="row vertical-align mycontent-bottom classWithBottmPad">
				<div class="col-md-6 col-lg-6">	
					<a href="#" ><span class="glyphicon glyphicon-calendar"></span>	
					</a><span class="text-muted">Todays Date</span>
				</div>
				<!-- <div class="clearfix"/> -->
				<div class="col-md-6 col-lg-6 ">	
					<button type="button" class="btn btn-success btn-sm pull-right"><i class="fa fa-plus"></i> New Task</button> 
				</div>
				<br/>
				<br/>
			</div>
			<div class="row ">
				<div class=" list-group col-md-12 col-lg-12" >
			  				
			  					<a  class="list-group-item list-group-item-danger taskWithBottmPad clearfix vertical-align" href="#">
			  						<div class="vertical-align">
			  						<img src="http://placehold.it/40x40" id="profileimage" class="img-circle  pull-left" alt="Responsive image">
			  						<span class="list-group-item-heading taskWithPad">Complete The task</span>
			  						<!-- <p class="text-sm text-muted"> Assigned by Santosh</p> -->
			  						<!-- <span class="label label-default label-pill pull-right">14</span> -->
			  						</div>
			  					</a>
			  				
			  
			 		  <!-- Add drop down menu -->
					 	
						  
			  					<a  class="list-group-item list-group-item-success taskWithBottmPad clearfix" href="#">
			  						<img src="http://placehold.it/40x40" id="profileimage" class="img-responsive  img-circle   pull-left " alt="Responsive image">
			  						<span class="list-group-item-heading taskWithPad">Complete The task</span>
			  						<!-- <p class="text-sm text-muted"> Assigned by Santosh</p> -->
			  						<!-- <span class="label label-default label-pill pull-right">14</span> -->
			  					</a>
			  				
			  				
						  
			  					<a class="list-group-item list-group-item-success taskWithBottmPad clearfix" href="#">
			  						<img src="http://placehold.it/40x40" id="profileimage" class="img-responsive  img-circle  pull-left" alt="Responsive image">
			  						<span class="list-group-item-heading taskWithPad">Complete The task</span>
			  						<!-- <p class="text-sm text-muted"> Assigned by Santosh</p> -->
			  						<!-- <span class="label label-default label-pill pull-right">14</span> -->
			  					</a>
			  				
			  				
					</div>
			</div>

		</div>
	
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
<!-- Use downloaded version of Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>